<template>
    <el-card shadow="never">
        <div class="wallet-wrapper">
            <div class="wallet-base">
                <div>
                    <p class="wallet-title">钱包余额</p>
                    <el-tooltip 
                         placement="left-start"
                         effect="light"
                        >
                        <template #content>
                            <p><h2 style="color:#ddd">没有初恋的钱包不是正经皮夹子</h2></p>
                        </template>
                        <el-icon style="vertical-align: middle; position: absolute; right: 395px;top: 60px;" :size=17><InfoFilled /></el-icon>
                    </el-tooltip>
                    
                </div>
                <div class="wallet-prize-container">
                    <div class="available_price">￥0.00</div>
                </div>
                <el-button class="get-money"  type="primary" size="small" disabled>体现</el-button>
                <div class="bottom-tip-container" style="font-size: 14px;">
                    <Odometer style="width: 1em; height: 1em; margin-right: 8px" />
                    <span >联系客服</span>
                </div>
                
            </div>
        </div>        
    </el-card>
    
</template>

<script>
export default {
    name: "Wallet",
}
</script>

<style scoped lang="less">
    .wallet-wrapper{
        .wallet-base{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .wallet-title{
                font-size: 16px;
                color: #111;
                text-align: center;
                position: relative;
                margin: 32px 0;            
            }
            .el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
            padding: 6px 12px;
            background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
                }

            .el-popper.is-customized .el-popper__arrow::before {
             background: linear-gradient(45deg, #b2e68d, #bce689);
             right: 0;
            }
            .wallet-prize-container{
                font-size: 26px;
                color: #111;
                text-align: center;
                padding: 60px 0 51px;
                font-weight: 700;
            }
            .get-money{
                width: 180px;
                height: 50px;
                color: #fff;
                background-color: #fc9bc2;
                border-color: #fc9bc2;
                    }
            .bottom-tip-container{
                text-align: center;
                padding: 111px 0 16px;
            }      
            }
            
        }

    
    
</style>